邮箱自动补全

最近做的项目，需要用到邮箱的自动补全，但是只是三个常见的
所以就自己写了下，代码如下：
<!DOCTYPE html>
<html>
  <head>
    <title>自动补全</title>

    <style type="text/css">
        .text_input {
            padding: 5px 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 22px;
        }
        .text_input:focus {
            outline: none;
        }
        .hide {
            display: none !important;
        }
        .drop_down_ul {
            padding-left: 0;
        }
        .drop_down_ul li {
            cursor: pointer;
            list-style: none;
            padding: 2px 0 2px 15px;
            text-align: left;
        }

        .drop_down_ul li:hover,
        .drop_down_ul li.active {
            background-color: #3394ff;
            color: #fff;
        }
        body {
            text-align: center;
        }
    </style>

  </head>
  <body>
    <h1>输入邮箱</h1>
    <div class="input_wraper">
        <input class="text_input j_autocomplete">
    </div>



    <script charset="utf-8" src="http://libs.useso.com/js/jquery/1.9.1/jquery.js"></script>

    <script type="text/javascript">
        

    function AutoComplete($, inputEle) {
        var $targetEle = $(inputEle),
            mailSuffix = ['qq.com', '163.com', '126.com'],
            dropDownHtml = '<div class="hide" style="position: fixed; background-color: #fff; max-height: 200px;z-index: 9999;border: 1px solid #ccc;' + 
                'padding-bottom: 20px;" id="mailAutoComplete"><ul class="drop_down_ul"></ul></div>',
            $bodyEle = $(window);

        $('body').append(dropDownHtml)
        $completeELe = $('#mailAutoComplete');

        /**
         * 设置下拉框的位置
         */
        function setSearchResultPos() {
            var offset = $targetEle.offset(),
                windowScrollTop = $(window).scrollTop() || document.documentElement.clientTop,
                windowScrollLeft = $(window).scrollLeft() || document.documentElement.clientLeft,
                width = $targetEle[0].offsetWidth,
                height = $targetEle[0].offsetHeight;
            $completeELe.css({
                top: (offset.top + height - windowScrollTop - 1) + 'px',
                left: (offset.left - windowScrollLeft) + 'px',
                width: (width - 2) + 'px'
            });
        }


        /**
         * 是否展示下拉框
         * @returns {boolean}
         */
        function isShowComplete() {
            var mailText = $targetEle.val();
            return mailText.replace(/\s/g, '').length >= 1;
        }

        /**
         * 获取补全的下拉文本列表
         */
        function getCompleteText() {
            var mailSuffixConfig = mailSuffix,
                mailText = $.trim($targetEle.val()),
                mailPre = mailText.split('@')[0],
                textList = [],
                matchList = [];
            $.each(mailSuffixConfig, function(index, suffix) {
                textList.push(mailPre + '@' + suffix);
            });
            $.each(textList, function(i, text) {
                if(text.indexOf(mailText) != -1) {
                    matchList.push(text);
                }
            });
            if(matchList.length == 1 && matchList[0] == mailText) {
                return [];
            }
            return matchList;
        }

        function hideSearchResult() {
            $completeELe.addClass('hide');
        }


        function showSearchResult() {
            var ul = '',
                textList = getCompleteText();
            if(textList.length) {
                setSearchResultPos();
                $.each(textList, function (i, text) {
                    ul += '<li>' + text + '</li>';
                });
                $completeELe.find('ul').html(ul);
                $completeELe.removeClass('hide');
            } else {
                hideSearchResult();
            }
        }

        function searchDown() {

            var $activeLi = $completeELe.find('li.active'),
                $firstLi = $completeELe.find('li:first-child');
            if($activeLi.length) {
                var $nextLi = $activeLi.next();
                $activeLi.removeClass('active');
                ($nextLi.length) ? $nextLi.addClass('active') : $firstLi.addClass('active');
            } else {
                $firstLi.addClass('active');
            }

        }

        function searchUp() {

            var $activeLi = $completeELe.find('li.active'),
                $lastLi = $completeELe.find('li:last-child');
            if($activeLi.length) {
                var $beforeLi = $activeLi.prev();   //获取前一个元素
                $activeLi.removeClass('active');
                ($beforeLi.length) ? $beforeLi.addClass('active') : $lastLi.addClass('active');
            } else {
                $lastLi.addClass('active');
            }

        }

        //键盘↑↓按键监听
        function dealKeyUpDown(e) {
            if(!$completeELe.hasClass('hide')) {   //下拉框可见
                var k = e.charCode || e.keyCode; // 兼容 firefox charCode
                if (k == 40) {
                    searchDown();
                } else if (k == 38) {
                    searchUp();
                } else if(k == 13) {
                    var $activeLi = $completeELe.find('li.active');
                    if($activeLi.length) {
                        $activeLi.click();
                    }
                }
            }
        }


        $targetEle.keyup(function(e) {
            e.preventDefault();
            var k = e.charCode || e.keyCode; // 兼容 firefox charCode
            if (k == 40 || k == 38 || (k == 13)) {
                dealKeyUpDown(e);//键盘↑↓按键监听
            } else if (isShowComplete()) {
                showSearchResult();
            } else {
                hideSearchResult();
            }
            return false;
        });


        //键盘↑↓按键监听
        $completeELe.on('keyup', function(e) {
            dealKeyUpDown(e) ;
        });


        $targetEle.click(function() {
            isClickOnResult = false;
            if(isShowComplete()) {
                showSearchResult();
            } else {
                hideSearchResult();
            }
            return false;
        });


        var isClickOnResult = false,
            isMouseOver = false;


        $bodyEle.click(function() { 
            !isClickOnResult && hideSearchResult(); 
            isClickOnResult = false; 
        });

        $bodyEle.resize(function(){ setSearchResultPos(); });

        $(window).scroll(function() { hideSearchResult(); });

        $completeELe.click(function() {
            isClickOnResult = true;
            return false;
        });

        $completeELe.mouseover(function() {
            isMouseOver = true;
        });

        $completeELe.mouseleave(function() {
            isMouseOver = false;
        });

        $completeELe.delegate('li', 'click', function() {
            $targetEle.val($(this).text());
            isMouseOver = false;
            $targetEle.blur();   //触发一下blur事件 让提示语消失
            isClickOnResult = true;
            hideSearchResult();
            return false;
        });
    }

    AutoComplete(window.jQuery, '.j_autocomplete');
    

    </script>


    </body>

</html>
邮箱自动补全

炑木

引用和评论

数字的千位分隔符实现

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合
